<template>
  <div class="GCbox">
    <!-- 创建八个聊天框 -->
    <ChatBox v-for="chat in chats" :key="chat.id" :user="chat.user" :userAvatar="chat.userAvatar" :chatId="chat.id"
      :messages="getChatMessages(chat.id)" />
  </div>
</template>

<script>
import ChatBox from '../chatBox/index.vue';

export default {
  name: 'GCpage',
  components: {
    ChatBox,
  },
  data() {
    return {
      chats: Array.from({ length: 8 }, (_, index) => ({
        id: index + 1,
        user: `用户${index + 1}`,
        userAvatar: 'https://www.bing.com/th?id=OIP.ZtrvDWpDrJNiyRQj6DwPvwAAAA&w=176&h=185&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2', // 替换为你的用户头像路径
        messages: [ // 每个聊天框的固定消息数据
          { user: `用户${index + 1}`, content: `消息1`, timestamp: '2023-01-01 12:00:00' },
          { user: `用户${index + 1}`, content: `消息2`, timestamp: '2023-01-01 12:05:00' },]
      })),
      apiData: [],
    };
  },
  mounted() {
    this.fetchData();
    console.log(this.chats);
  },
  methods: {
    fetchData() {
      // 模拟从接口获取的数据
      // 替换为实际的接口请求代码
      // this.apiData = [
      //   { chatId: 1, user: '用户1', userAvatar: 'static/picture/1.jpeg', content: '消息1' },
      //   { chatId: 2, user: '用户2', userAvatar: 'static/picture/2.jpeg', content: '消息2' },
      // ];
    },
    getChatMessages(chatId) {
      // 根据 chatId 过滤出对应聊天框的消息
      const chatBox = this.chats.find(chat => chat.id === chatId);
      return chatBox ? chatBox.messages : [];
    },
  }
};
</script>

<style lang="less" scoped>
.GCbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
  height: 100vh;

  .chat-box {
    min-width: 200px;
    margin: 10px;
    flex: 1 0 23%;
  }
}
</style>